import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Typography from 'material-ui/Typography'
import { withStyles } from 'material-ui/styles'
import Hidden from 'material-ui/Hidden'

import logo from '../../assets/logo.png'

const styles = theme => ({
	root: {
		display: 'flex',
    alignItems: 'center',
    flex: 1,
    marginTop: 4
	},
	logo: {
		height: 35,
		paddingRight: 1
	},
	logoTitle: {
		marginRight: 32,
	},
	subtitle: {
		fontSize: 14,
		flex: 1
	},
	link: {
		display: 'flex',
		flexDirection: 'row',
		alignItems: 'center',
  	textDecoration: 'none',
  	color: 'black',
  },
  '@media (max-width: 600px)': {
  	logo: {
  		height: 24,
  		paddingRight: 1
  	},
  	logoTitle: {
  		fontSize: 16
  	}
  },
})

@withStyles(styles)
class Logo extends Component {
	constructor(props) {
	  super(props);
	}

	render() {
	  const { classes, showSubTitle, showLogoTitle, showLogo } = this.props
		return (
			<div className={classes.root}>
				<Link to={'/'} className={classes.link}>
					{
						showLogo? <img src={logo} className={classes.logo}/>: <img src={logo} className={classes.logo}/>
					}
      		{
      			showLogoTitle?
      			<Typography type="title" color="inherit" className={classes.logoTitle}>
				      IT课店
				    </Typography>
				    :
				    <Hidden xsDown>
				    	<Typography type="title" color="inherit" className={classes.logoTitle}>
					      IT课店
					    </Typography>
				    </Hidden>
      		}
      		{
						showSubTitle?
						<Hidden xsDown>
					    <Typography className={classes.subtitle}>
					      <i>发现好课程</i>
					    </Typography>
					  </Hidden>
				    :
				    ''
					}
			  </Link>
	    </div>
    )
	}
}

export default Logo;